<template>
  <div class="content">
    <div class="title" v-if="isTitle == 'Show'">
      <h1>目标检测</h1>
      <h2>Object Detection</h2>
      <span>在计算机视觉众多的技术领域中，目标检测是一项非常重要的任务，图像分割、物体追踪、关键点检测等通常都要依赖于目标检测。</span>
    </div>
    <div class="output" v-if="isTitle == 'notShow'">
      <div v-html="imgSrc"></div>
    </div>
    <div class="button" v-show="isTitle == 'Show'">
      <div class="button-main">
        <!-- 静态识别 -->
        <form action="/video" enctype='multipart/form-data' method='POST'>
          <div class="input-file">
            <input v-if="isInputFileShow" class="input-submit" type="submit" value="上传" @click="output_button">
            <span v-else>静态识别</span>
            <input type="file" name="file" id="file" @click="() => isInputFileShow = true">
          </div>
        </form>
        <!-- 实时监控 -->
        <div style="width: 60px;display: inline-block;"></div>
        <form action="/camera" enctype='multipart/form-data' method='POST'>
          <input class="input-camera" type="submit" value="开启监控" @click="output_button">
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const imgSrc = ref(`<img src="/video_start" alt="">`); // 与后端接口部分的代码编译成纯 html
const isInputFileShow = ref(false);
const isTitle = ref('Show');

// 初始全局 sessionStorage 变量
if(window.sessionStorage.getItem('isTitle')) isTitle.value = window.sessionStorage.getItem('isTitle');

/**
 * 函数相关
 */
const output_button = () => {
  isTitle.value = 'notShow';
  window.sessionStorage.setItem('isTitle', 'notShow');
}
</script>

<style scoped>
  .content {
    width: 100%;
    position: absolute;
    top: 80px;
    bottom: 0;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: url('../img/bg.jpg') center no-repeat;
    animation: content 0.6s forwards ease;
  }

  @keyframes content {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .title {
    width: 920px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    animation: title 0.6s forwards ease;
  }

  @keyframes title {
    from {
      height: 0;
    }
    to {
      height: 400px;
    }
  }

  .output {
    width: 1280px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    animation: output 0.6s forwards ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  @keyframes output {
    from {
      height: 0;
    }
    to {
      height: 720px;
    }
  }

  .output div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
  }

  .title h1 {
    color: #fffe;
    font-size: 60px;
    font-weight: 200;
    letter-spacing: 20px;
    text-align: center;
    line-height: 220px;
  }

  .title h2 {
    margin-top: -100px;
    color: #fffe;
    font-size: 28px;
    font-weight: 200;
    line-height: 120px;
    letter-spacing: 2px;
    text-align: center;
  }

  .title span {
    color: #fffe;
    text-align: center;
    font-size: 20px;
    font-weight: 200;
    line-height: 40px;
    display: block;
  }

  .button {
    width: 920px;
    height: 100px;
  }

  .button-main {
    width: 380px;
    margin: 40px auto 0;
  }

  .button-main form {
    display: inline-block;
    transition: 0.5s;
  }

  .button-main form:hover {
    background-color: #6666;
  }

  .input-file {
    width: 160px;
    height: 50px;
    border: 1px solid #fff;
    
    float: left;
    box-sizing: border-box;

    color: #fffe;
    font-size: 16px;
    letter-spacing: 2px;
    text-align: center;
    line-height: 50px;
  
    position: relative;
  }

  .input-file .input-submit {
    position: relative;
    z-index: 2;
  }

  .input-file #file {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
  }

  .input-camera, .input-submit {
    width: 160px;
    height: 50px;

    color: #fffe;
    font-size: 16px;
    letter-spacing: 2px;

    background: none;
    outline: none;
    border: none;
    float: left;
    box-sizing: border-box;

    cursor: pointer;
  }

  .input-camera {
    border: 1px solid #fff;
  }
</style>